<script setup>
import {ref} from "vue";

const value = ref("233");
</script>

<template>
  <view class="search-wrapper">
    <uni-easyinput
        dark
        :inputBorder="false"
        v-model="value"
        placeholder="请输入内容"
        :styles="{ backgroundColor: '#232728', color: '#fff' }"
    >
      <template v-slot:left>
        <uni-icons
            style="
						backgroundcolor: #232728;
						height: 49px;
						line-height: 49px;
						padding-left: 10px;
					"
            color="#fff"
            type="search"
            size="20"
        />
      </template>

      <template v-slot:leftIcon>
        <uni-icons color="#fff" type="search" size="20"/>
      </template>

      <template v-slot:right>
        <uni-icons
            style="
						backgroundcolor: #232728;
						height: 49px;
						line-height: 49px;
						padding-right: 10px;
					"
            color="#fff"
            type="mic"
            size="20"
        />
      </template>
    </uni-easyinput>
  </view>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-top: 35px;
  background-color: #232728;
  height: 51px;
  padding: 0 10px;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.uni-easyinput__content {
  border-radius: 10px !important;
}
</style>
